import React from 'react';
import './index.css'
import ImageGallery from 'react-image-gallery';
import { Input ,Grid ,Icon ,Item ,Button ,Dimmer ,Loader} from 'semantic-ui-react';
import "react-image-gallery/styles/css/image-gallery.css";
import axios from 'axios'
import { withRouter } from "react-router-dom";


// 菜单模板
 function Menus (props){
    let menuList = props.data.map((item)=>{
        return(
            <Grid.Column key={item.id} onClick={props.handleMenu.bind(this,item.menu_name,item.id)}>
                <div className="home-menu-item">
                    <Icon name="home" size='big'></Icon>
                </div>
                <div>{item.menu_name}</div>
            </Grid.Column>
        );
    })
    return(
        <div className="home-menu">
            <Grid columns={4} divided>
                <Grid.Row>
                    {menuList}
                </Grid.Row>
            </Grid>
        </div>
    );
}

// 资讯模板
function Info (props){
    let InfoList = props.data.map((item,index)=>{
        return(
            <Item.Header key={index}>
                <span>限购 ●</span>
                <span>{item.info_title}</span>
            </Item.Header>
        )
    })
    return (
        <div className="home-msg">
            <Item.Group unstackable>
                <Item className="home-msg-img">
                    <Item.Image size='tiny' src={'http://47.96.21.88:8086/public/zixun.png'}></Item.Image>
                    <Item.Content verticalAlign="top">
                        {InfoList}
                    </Item.Content>
                </Item>
            </Item.Group>
        </div>
    );
}

// 问答模板
function Faq (props){
    let faq = props.data.map(item=>{
        let tags = item.question_tag.split(',').map((tag,index)=>{
            return <Button key={index} basic color="green" size="mini">{tag}</Button>
        })
        return (
            <li key={item.question_id}>
                <div>
                    <Icon name="question circle outline"></Icon>
                    <span>{item.question_name}</span>
                </div>
                <div>
                    {tags}
                    <div>{item.atime} ● <Icon name="comment alternate outline"></Icon></div>
                </div>
            </li>
        );
    })
    return(
        <div className="home-ask">
            <div className="home-ask-title">好客问答</div>
            <ul>
                {faq}
            </ul>
        </div>
    );
}

// 房源列表布局与数据填充
function House (props){
    let house = ['最新开盘','二手精选','组一个家'];
    let houseData = [[],[],[]];
    props.data.forEach(d=>{
        if(d.home_type === 1){
            // 最新开盘
            houseData[0].push(d);
        }else if(d.home_type === 2){
            houseData[1].push(d);
        }else{
            houseData[2].push(d)
        }
    })
    let houseList = house.map((item,index)=>{
        // 单个房源的列表
        let list = houseData[index].map(house=>{
            let tags = house.home_tags.split(',').map((tag,index)=>{
                return <Button key={index} basic color="green" size="mini">{tag}</Button>
            }) 
            return(
                <Item key={house.id}>
                    <Item.Image src={'http://47.96.21.88:8086/public/home.png'}></Item.Image>
                    <Item.Content>
                        <Item.Header>{house.home_name}</Item.Header>
                        <Item.Meta>
                            <span className="cinema">{house.home_desc}</span>
                        </Item.Meta>
                        <Item.Description>
                            {tags}
                        </Item.Description>
                        <Item.Description>{house.home_price}</Item.Description>
                    </Item.Content>
                </Item>
            );
        })
        return (
            <div key={index}>
                <div className="home-hire-title">{item}</div>
                <Item.Group divided unstackable>
                    {list}
                </Item.Group>
            </div>
        );
    })
    return(
        <div>
            {houseList}
        </div>
    );
}

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            swiper:[],
            menu:[],
            info:[],
            faq:[],
            house:[],
            isLoading:true
        }
    }
    render(){
        return(
            <div className="home-container">
                <div className="home-topbar">
                    <Input fluid icon='search' placeholder="请输入内容"></Input>
                </div>
                <div className="home-content">
                <Dimmer inverted active={this.state.isLoading}>
                    <Loader>Loading...</Loader>
                </Dimmer>
                {/* 轮播图布局 */}
                   <ImageGallery 
                     showThumbnails={false}
                     showNav={false}
                     autoPlay={true}
                     items={this.state.swiper}
                   />
                   {/* 菜单布局 */}
                   <Menus data={this.state.menu} handleMenu={this.handleMenu}/>
                   {/* 资讯布局 */}
                   <Info data={this.state.info}></Info>                 
                   {/* 问答布局 */}
                   <Faq data={this.state.faq}></Faq>
                   {/* 房源布局 */}
                   <House data={this.state.house}></House>
                </div>
            </div>
        );
    }
    // 处理主页菜单的点击行为
    // 处理页面跳转：编程式导航
    handleMenu = (name,type) =>{
        let {history} = this.props;
        // history.push('/home/list',{mnane:name,type:type})
        if(name==='二手房' || name ==='新房' || name ==='租房' || name ==='海外'){
            history.push('/home/list',{mname:name,type:type})
        }else if(name === '计算器'){
            history.push('/home/calc')
        }else if (name === '地图找房')
            history.push('/home/map')
    }
    // 通用接口调用方法
    queryData = (path) =>{
        return axios.post(path).then(res=>{
            return res.data.list
        })
    }
    componentDidMount(){
        // 轮播图数据
        // axios.post('homes/swipe').then(res=>{
        //     // 更新状态数据
        //     this.setState({
        //         swiper:res.data.list
        //     })
        // })

        let swipe = this.queryData('homes/swipe')

        // 菜单数据
        // axios.post('homes/menu').then(res=>{
        //     // 更新菜单数据
        //     this.setState({
        //         menu:res.data.list
        //     })
        // })

        let menu = this.queryData('homes/menu')

        // 资讯数据
        let info = this.queryData('homes/info')

        // 问答数据
        let faq = this.queryData('homes/faq')

        // 房源数据
        let house = this.queryData('homes/house')

        // Promise.all方法的作用：并发触发多个异步任务，所有的任务都返回时获取到所有的结果
        // Promise.race方法的作用：并发触发多个异步任务，只要有一个任务返回结果，那么就触发then获取该任务结果
        Promise.all([swipe,menu,info,faq,house]).then(ret=>{
            this.setState({
                swiper:ret[0],
                menu:ret[1],
                info:ret[2],
                faq:ret[3],
                house:ret[4],
                isLoading:false
            })
        })

    }
}

export default withRouter(Home);    